<template>
  <div class="app-container">
    <div class="filter-container filter-container-left">
      <el-form :inline="true" label-width='90px'>
        <el-form-item label="企业名称：" class="flex_box">
          <el-input v-model="queryParam.company_name" placeholder="企业名称" clearable class="filter-item" />
        </el-form-item>
        <el-form-item label="账号：" class="flex_box">
          <el-input v-model="queryParam.mobile" placeholder="账号" clearable class="filter-item" />
        </el-form-item>
        <el-form-item label="职位类型：" class="flex_box">
          <el-cascader
            v-model="queryParam.attr_value_id_str"
            :options="postTypeList"
            :props='optionProps'
            :show-all-levels="false"
            @change='filterPostChange'
            placeholder="请选择职位类型"
            class="filter-item form-search-input" 
            ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item search" type='primary' icon="el-icon-search" @click="handleSearch">查询</el-button>
          <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="data" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
      <!-- <el-table-column prop="id" label="序号" width='60' align='center'/> -->
      <el-table-column label="企业名称" align='center'>
        <template slot-scope="item">
          {{item.row.company_info.name}}
        </template>
      </el-table-column>
      <el-table-column prop="user_info.mobile" label="账号" width='100' align='center'/>
      <el-table-column prop='attr_post_name' label="急招岗位" align='center'/>
      <el-table-column prop="salary_money" label="岗位薪资" width='90' align='center'/>
      <el-table-column prop="platform_money" label="平台酬劳" width='90' align='center'/>
      <el-table-column prop="count_money" label="付费金额" width='90' align='center'/>
      <el-table-column label="付费时间" width='130' align='center'>
        <template slot-scope="item">
          {{getTime(item.row.pay_time)}}
        </template>
      </el-table-column>
      <el-table-column prop="branch_info.user_info.mobile" label="收款账号" width='100' align='center'/>
      <el-table-column label="结算时间" width='130' align='center'>
        <template slot-scope="item">
          {{getTime(item.row.salary_time)}}
        </template>
      </el-table-column>
      <el-table-column label="人才状态" width='80' align='center'>
        <template slot-scope="item">
          {{getTalentStatus(item.row.talent_status)}}
        </template>
      </el-table-column>
      <el-table-column label="工作状态" width='80' align='center'>
        <template slot-scope="item">
          {{getWorkStatus(item.row.work_status)}}
        </template>
      </el-table-column>
      <el-table-column label="薪资状态" width='80' align='center'>
        <template slot-scope="item">
          {{getSalaryStatus(item.row.salary_status)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width='200' align='center'>
        <template slot-scope="item">
          <el-button type="text" size='mini' @click="details(item.row)">查看详情</el-button>
          <el-button type="text" size='mini' @click="peopleAllotment(item.row)" v-if="item.row.talent_status==0">人员分配</el-button>
          <el-button type="text" size='mini' @click="salary(item.row)" v-if="item.row.salary_status==0">薪资结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <el-dialog :visible.sync="detailsDialog" width='654px' :show-close='false'>
      <div slot="title" class="dialog-title">保到岗详情</div>
      <el-card class="el-card-border">
        <div v-if="info">
          <div class="flex_start details_info">
            <span class="label">付费企业：</span>
            <p class="flex1 info">{{info.company_info.name}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">急招岗位：</span>
            <p class="flex1 info">{{info.attr_post_name}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">岗位要求：</span>
            <p class="flex1 info">{{info.job_require}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">到岗时间：</span>
            <p class="flex1 info">{{getTime(info.arrival_time)}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">岗位薪资：</span>
            <p class="flex1 info">{{info.salary_money}}{{info.salary_type==1?'元/天':info.salary_type==2?'元/月':'元/趟'}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">工作时长：</span>
            <p class="flex1 info">{{info.work_date}}天</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">平台酬劳：</span>
            <p class="flex1 info">{{info.platform_money}}元</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">实付金额：</span>
            <div class="flex1 info">
              <p>{{info.count_money}}元</p>
              <p>(其中：{{info.salary_money*info.work_date}}元为岗位薪资，{{info.platform_money}}元为平台酬劳)</p>
            </div>
          </div>
          <div class="flex_start details_info">
            <span class="label">人才状态：</span>
            <p class="flex1 info">{{getTalentStatus(info.talent_status)}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">工作状态：</span>
            <p class="flex1 info">{{getWorkStatus(info.work_status)}}</p>
          </div>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hide('detailsDialog')" size='medium'>关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="peopleDialog" width='400px' :show-close='false'>
      <div slot="title" class="dialog-title">人员分配</div>
      <el-form :model="formFieldsData" :label-position="labelPosition" ref='peopleAllotment' label-width='140px' :rules='rules'>
        <el-form-item label="请输入人才账号：" prop='mobile'>
          <el-input v-model="formFieldsData.mobile" autocomplete="off" placeholder='请输入人才账号'></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hide('peopleDialog')" size='medium'>取 消</el-button>
        <el-button type="primary" @click="peopleSubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="salaryDialog" width='500px' :show-close='false'>
      <div slot="title" class="dialog-title">薪资结算</div>
      <el-card class="el-card-border">
        <div v-if="info">
          <div class="flex_start details_info">
            <span class="label">用人企业：</span>
            <p class="flex1 info">{{info.company_info.name}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">急招岗位：</span>
            <p class="flex1 info">{{info.attr_post_name}}</p>
          </div>
          <div class="flex_start details_info">
            <span class="label">岗位薪资：</span>
            <p class="flex1 info">{{info.salary_money}}{{info.salary_type==1?'元/天':info.salary_type==2?'元/月':'元/趟'}}</p>
          </div>
          <div class="flex_start details_info" v-if="info.branch_info&&info.branch_info.user_info">
            <span class="label">收款账号：</span>
            <p class="flex1 info">{{info.branch_info.user_info.mobile}}</p>
          </div>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hide('salaryDialog')" size='medium'>关 闭</el-button>
        <el-button @click="salarySubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/promotion/admin/Protect',
      queryParam: {
        company_name:'',
        mobile:'',
        attr_post_id:'',
        page:1,
        page_size:10
      },
      defaultQueryParam:['page','page_size'],
      optionProps: {
        value: 'value_id',
        label: 'value_name',
        children: 'child'
      },
      categoryList:[
        {label:'类别1',value:1},
        {label:'类别2',value:2}
      ],
      timeList:[
        {label:'白班',value:1},
        {label:'夜班',value:2},
        {label:'全天',value:3},
        {label:'长途',value:4}
      ],
      detailsDialog:false, // 详情弹框
      peopleDialog:false, // 人员分配弹框
      salaryDialog:false,// 薪资结算弹框
      info:'',//弹框详情信息
      formFieldsData:{
        mobile:''
      },
      rules:{
        mobile:[
          { required: true, message: '请输入人才账号', trigger: 'blur' }
        ]
      },
    }
  },
  mounted() {
    this.GetAttrData('POST_TYPE')
  },
  methods: {
    // 详情
    details(item) {
      this.info = item
      this.detailsDialog = true
    },
    getTime(time) {
      if (time == 0) return '--'
      let date = new Date(time * 1000)
      let y = date.getFullYear();
      let m = date.getMonth()+1;
      let d = date.getDate();
      return y+'-'+this.add0(m)+'-'+this.add0(d)
    },
    add0(m){return m<10?'0'+m:m },
    //获取人才状态
    getTalentStatus(status){
      return status==0?'待分配':status==1?'待到岗':status==2?'已到岗':status==3?'已结束':''
    },
    //获取工作状态
    getWorkStatus(status){
      return status==0?'未开始':status==1?'进行中':status==3?'已完成':'--'
    },
    //获取薪资状态
    getSalaryStatus(status){
      return status==0?'未结算':status==1?'已结算':'--'
    },
    // 人员分配
    peopleAllotment(item) {
      this.info = item
      this.peopleDialog = true
    },
    // 薪资结算
    salary(item) {
      this.info = item
      this.salaryDialog = true
    },
    // 弹框隐藏
    hide(key) {
      this[key] = false
    },
    // 人员分配
    peopleSubmit() {
      if (this.formFieldsData.mobile == '') return
      let param = {
        request_type:1,
        mobile:this.formFieldsData.mobile
      }
      this.editInfo(param,'peopleDialog')
    },
    // 薪资结算
    salarySubmit() {
      this.$confirm('确定要结算吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = {
        request_type:2
      }
        this.editInfo(param,'salaryDialog')
      })
    },
    editInfo(param,dialogType) {
      this.$http.put(this.url +'/'+this.info.id, param).then(response => {
        this.hide(dialogType)
        this.getList()
      })
    },
    // 搜索职位类型改变
    filterPostChange(e) {
      this.queryParam.attr_post_id = e[1]
    }
  }
}
</script>
<style lang="scss" scoped>
  .details_info{
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 24px;
    .label{
      width: 80px;
      color: #61687C;
    }
    .info{
      color: #444;
    }
  }
</style>
